<script
	lang="ts"
	setup
>
import { publishUploadFilePost, shopGoodsCategoryTagPost, shopGoodsCategoryTagPut } from '@/api'
import EmptyModal from '@/components/EmptyModal.vue'
import { CATEGORY_STATUS } from '@/const/shop.goods.cate'
import type { OPublishShopGoodsCategoryListGetItem } from '@/typed/response'
import { ArrowUpload16Filled } from '@vicons/fluent'
import { type FormInst, type FormRules, type UploadCustomRequestOptions } from 'naive-ui'
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

interface IProps {
	show: boolean;
	data?: OPublishShopGoodsCategoryListGetItem;
	width?: number | string;
}

const formRef = ref<FormInst | null>(null)
const emit = defineEmits(['update:show', 'audit'])
const props = withDefaults(defineProps<IProps>(), {
	width: 500
})
const initForm = {
	id: undefined,
	name: '',
	headImg: '',
	desc: '',
	seqno: 0,
	status: CATEGORY_STATUS.enable,
};

const route = useRoute()
const loading = ref(false)
const fileList = ref<any[]>([])
const modalForm = ref<any>({ ...initForm })
const modalTitle = computed(() => {
	if (modalForm.value.id) {
		return '修改二级分类'
	} else {
		return '添加二级分类'
	}
})
const rules: FormRules = {
	headImg: [{
		required: true,
		message: '请输上传封面',
		trigger: ['change']
	}],
	name: [{
		required: true,
		message: '请输入分类名称',
		trigger: ['blur', 'input']
	}],
}

watch(() => props.data, () => {
	if (props.data) {
		modalForm.value = {
			id: props.data.id,
			name: props.data.name,
			headImg: props.data.headImg,
			desc: props.data.desc,
			seqno: props.data.seqno,
			status: props.data.status,
		}
		fileList.value = [{
			url: props.data.headImg,
			status: 'finished',
		}]
	} else {
		modalForm.value = initForm;
		fileList.value = []
	}

})

async function onAdd() {
	formRef.value?.validate(async (errors) => {
		if (!errors) {
			loading.value = true
			const action = modalForm.value.id ? shopGoodsCategoryTagPut : shopGoodsCategoryTagPost
			const { code } = await action({
				...modalForm.value,
				categoryId: route.params.id
			})
			loading.value = false
			if (code === 200) {
				window.$message.success('保存成功')
				modalForm.value = { ...initForm }
				emit('update:show', false)
			}
		}
	})

}

const customRequest = async (params: UploadCustomRequestOptions) => {
	const {
		file,
		onFinish,
		onError,
	} = params;
	const formData = new FormData()
	formData.append('files', file.file as File)
	const { data } = await publishUploadFilePost(formData)
	if (data) {
		modalForm.value.headImg = data;
		formRef.value?.validate(() => {
			return {
				trigger: 'headImg'
			}
		})
		onFinish()
	} else {
		onError()
	}
}

function onUpdateShow(show: boolean) {
	emit('update:show', show)
}
</script>

<template>
	<EmptyModal
		:show="show"
		@update:show="onUpdateShow"
		:loading="loading"
		:width="600"
		:title="modalTitle"
		@confirm="onAdd"
	>
		<n-form
			ref="formRef"
			:model="modalForm"
			label-placement="left"
			label-width="100"
			:rules="rules"
		>
			<n-form-item
				label="封面"
				path="headImg"
			>
				<n-upload
					v-model:file-list="fileList"
					:custom-request="customRequest"
					:max="1"
					list-type="image-card"
				>
					<n-icon :size="30">
						<ArrowUpload16Filled/>
					</n-icon>
				</n-upload>
			</n-form-item>
			<n-form-item
				label="启用"
				path="status"
			>
				<n-switch
					v-model:value="modalForm.status"
					:checked-value="CATEGORY_STATUS.enable"
					:unchecked-value="CATEGORY_STATUS.disable"
				/>
			</n-form-item>
			<n-form-item
				label="名称"
				path="name"
			>
				<n-input
					v-model:value="modalForm.name"
					placeholder="请填写名称"
				/>
			</n-form-item>
			<n-form-item
				label="品种描述"
				path="desc"
			>
				<n-input
					v-model:value="modalForm.desc"
					placeholder="请填写品种描述"
					type="textarea"
				/>
			</n-form-item>
			<n-form-item
				label="显示顺序"
				path="seqno"
			>
				<n-input-number
					v-model:value="modalForm.seqno"
					placeholder="请填写显示顺序"
					style="width: 100%"
				/>
			</n-form-item>
		</n-form>
	</EmptyModal>
</template>

<style
	lang="less"
	scoped
>

</style>
